import React,{Component} from 'react';
import './detail.css';
import fx from '../../assets/img/fx.png'
import qs from 'query-string';
import {queryDetail} from "../../services/product";
import HdbNav from "../../components/hdb-nav/";
import DetailSkeletion from '../../components/skeleton-screen/detail'
import {formatTime} from "../../utils/formatTime";

export default class Detail extends Component{

    constructor(props){
        super(props);

        this.state = {
            data:{}
        };

        let {match:{params:{id}},location:{search}} = props;
        let apiname = qs.parse(search).apiname;

        queryDetail({id,apiname}).then(
            res=>this.setState({data:res.data.data})
        )
    }

    render(){

        if (!this.state.data.title) return <DetailSkeletion/>;

        let {title,time,detail:{auth,auth_icon,content}} = this.state.data;
        return (
            <div>
                <HdbNav/>
                <div className="content">
                    <div className="header clear"><h2><img src={auth_icon} alt=""/></h2><p>{auth}</p></div>
                    <div className="cont">
                        <h3>{title}</h3>
                        <div className="time"><p>{formatTime(time)}<span><img src={require('../../assets/img/zan.png')} alt=""/></span></p>
                        </div>
                        <div
                            className="text-box"
                            dangerouslySetInnerHTML={{__html: content }}
                        >

                        </div>
                    </div>
                </div>
                <div className="foot-btn">
                    <ul>
                        <li className="say"><a>
                            <i></i><span>0</span>
                        </a></li>
                        <li className="zan" style={{background:`url(${require('../../assets/img/zan1.png')}) no-repeat 0 0`}}><a>
                            <i></i><span>0</span>
                        </a></li>
                        <li className="xing"><a>
                            <i><img src={require('../../assets/img/xing.png')} alt=""/></i>
                        </a></li>
                        <li className="fx"><a>
                            <i><img src={fx} alt=""/></i>
                        </a></li>
                    </ul>
                </div>
            </div>
        )
    }
}